<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <!-- 上传表单样式 -->
    <style>
        .upload-box {
            padding: 20px;
            border: 2px dashed #ccc;
            margin: 50px auto;
            width: 300px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="upload-box">
        <h2>文档上传系统</h2>
        <!-- 文件上传表单 -->
        <form id="uploadForm">
            <input type="file" id="fileInput" required>
            <button type="submit">上传文档</button>
        </form>
        <div id="status"></div>
    </div>

    <!-- 文件上传逻辑 -->
    <script>
        document.getElementById('uploadForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            const file = document.getElementById('fileInput').files[0];
            const formData = new FormData();
            formData.append('file', file);

            try {
                // 调用后端API接口
                const response = await fetch('http://localhost:5000/upload', {
                    method: 'POST',
                    body: formData
                });
                document.getElementById('status').textContent = '上传成功！'; 
            } catch (error) {
                document.getElementById('status').textContent = '上传失败：' + error;
            }
        });
    </script>
</body>
</html>